<!-- 注意这里不需要写`<html><body>`这些东西，它是一个html片段，不是完整的html页面 -->
<form id="extForm" lay-filter="extForm" class="layui-form model-form">
    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">大题题目</label>
        <div class="layui-input-block">
            <input name="title" class="layui-input" id="title" placeholder="请输入大题题目" lay-verType="tips" lay-verify="required"
                   required/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">题型</label>
        <div class="layui-input-block">
            <select name="type" id="type" lay-verify="" lay-filter="tx">
            </select>
        </div>
    </div>
   <!-- <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">类别</label>
        <div class="layui-input-block">
            <select name="type" lay-verify="">
            </select>
        </div>
    </div>-->
    <div class="layui-tab" lay-filter="test1" style="margin-left: 50px;">
        <ul class="layui-tab-title">
            <li lay-id="1" class="layui-this">随机选题</li>
            <li lay-id="2">手动选题</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                题数: <input name="total" id="tx" type="number" lay-verify="number|gtZero" class="layui-input" style="width: 20%;display: inline;" value="1">
                <button type="button" class="layui-btn" id="gettx">获取</button>
            </div>
            <div class="layui-tab-item">
                <button type="button" class="layui-btn" id="getQuestion">选择题目</button>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">选中题目</label>
        <div class="layui-input-block">
            <input name="xztm" class="layui-input" style="width: 200px;float: left" id="selectId" value ="已选中0道题" lay-verType="tips" readonly/>
            <div class="layui-btn" style="float: left" id="queryTx">
                <i class="layui-icon layui-icon-search"></i>查看题目
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">说明</label>
        <div class="layui-input-block">
            <input name="remark" class="layui-input" placeholder="请输入大题题目" lay-verType="tips"
                   required/>
        </div>
    </div>

    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="extFormSubmitBtn" lay-submit>保存</button>
    </div>
</form>

<script id="renderBox" type="text/html">
    <div class="md-content">
        <div style="overflow: scroll; scrolling: yes;height:500px">
            {{# layui.each(d,function(index,item){  }}
            <div>
<!--                <div style="line-height: 30px"><span class="layui-btn-danger" style="cursor:pointer; float: right;" onclick=removeQue("{{item.id}}")>移除此题</span></div>-->
                <div style="padding-left: 40px;line-height: 30px"><strong><b>{{index+1}}.</b></strong><b>{{item.title}}</b></div>
                <div style="padding-left: 40px;line-height: 30px"><b>{{item.foption.split(",fh,").join(" ")}}</b></div>
            </div>
            {{# }); }}
        </div>
    </div>
</script>
<script>
    layui.use(['layer', 'form', 'admin', 'xnUtil', 'xmSelect', 'element','notice','laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var xnUtil = layui.xnUtil;
        var xmSelect = layui.xmSelect;
        var element = layui.element;
        var notice = layui.notice;
        var laytpl = layui.laytpl;

        form.verify({
            gtZero: [/(^[1-9]\d*$)/,'只能输入正整数']
        });
        var editData = admin.getLayerData('#extForm').data;

        // 渲染字典下拉
        xnUtil.rendDictDropDown(null, 'type', 'examType', '请选择类型', null);

        var extOrgTreeRenderIns = {};

        // 监听标签页切换事件
        var tabIndex = 0;
        element.on('tab(test1)', function(data){
            tabIndex = data.index; // 当前标签的索引
        });


        if (editData !== null && editData !== undefined) {
            form.val('extForm', editData);
            // extPosDataRenderIns.setValue([editData.posId]);
        }
        var selectData = "";
        // 表单提交事件
        form.on('submit(extFormSubmitBtn)', function (data) {
            var resultData = {};
            debugger;
            resultData.selectData = selectData;
            resultData.title = data.field.title;
            resultData.remark = data.field.remark;
            resultData.total = data.field.total
            // resultData.xztx = data.field.xztx;
            resultData.type = data.field.type;
            admin.putLayerData('formOk', true, '#extForm');
            admin.putLayerData('resultData', resultData, '#extForm');
            admin.closeDialog('#extForm');
            return false;
        });
        var txxz = "";
        var type = "";
        form.on('select(tx)', function(data){
            txxz = data.value;
        });
        $("#gettx").click(function (){
            debugger;
            txxz = $("#type").val();
            if($("#title").val() == ""){
                layer.alert('题目不能为空!', {icon: 2});
                return;
            }
            if(txxz == ""){
                layer.alert('题型不能为空!', {icon: 2});
                return;
            }
            if($("#tx").val() == ""){
                layer.alert('请输入题数!', {icon: 2});
                return;
            }
            $.ajax({
                type: 'get',
                url: getProjectUrl() + 'testpaper/automatic',
                contentType: 'application/json',
                data: {'txxz':txxz,"tx":$("#tx").val()},
                success: function (res) {
                    debugger;
                    type = txxz;
                    selectData = res.data;
                    $("#selectId").val("已选中"+selectData.length+"道题目")
                }
            });
        });
        $("#queryTx").click(function () {
            var quar = "";
            if(type == '0'){
                quar = "/singleelection/queryByIDS"
            }else if(type == '1'){
                quar = "/multipleselection/queryByIDS"
            }else if(type == '2'){
                quar = "/judgementquestion/queryByIDS"
            }else if(type == '3'){
                quar = "/completion/queryByIDS"
            }else if(type == '4'){
                quar = "/largequestion/queryByIDS"
            }
            var tplStr = $("#renderBox").html();
            var render = laytpl(tplStr);
            //渲染数据
            var renderHtml = render.render(selectData)
            var layIndex = admin.open({
                type: 1,
                title: ['试题预览','font-size:18px;text-align: center;background-color:cadetblue'],
                content: renderHtml,
                area: ['500px', '400px'],
                success: function (layero, dIndex) {

                }
            });

        });
        $("#getQuestion").click(function () {
            var txlx = $("#type").val();
            var strs = "";
            var ym = "";
            txxz = $("#type").val();
            if($("#title").val() == ""){
                layer.alert('题目不能为空!', {icon: 2});
                return;
            }
            if(txxz == ""){
                layer.alert('题型不能为空!', {icon: 2});
                return;
            }
            if(txlx == 0){
                strs = "单选题";
                ym = "dxWindow";
            }else if(txlx == 1){
                strs = "多选题";
                ym = "muWindow";
            }else if(txlx == 2){
                strs = "判断题";
                ym = "juWindow";
            }else if(txlx == 3){
                strs = "填空题";
                ym = "comWindow";
            }else if(txlx == 4){
                strs = "问答题";
                ym = "larWindow";
            }
            var layIndex = admin.open({
                offset: '0px',
                title: strs,
                area: ['850px', '520px'],
                url: getProjectUrl() + 'testpaper/'+ym,
                data: {},     // 传递数据到表单页面
                end: function () {
                    var layerData = admin.getLayerData(layIndex, 'formOk');
                    if (layerData) {  // 判断表单操作成功标识
                        debugger;
                        var resultData = admin.getLayerData(layIndex, 'resultData');
                        selectData = resultData;
                        $("#selectId").val("已选中"+resultData.length+"道题目")
                        //insExtTb.reload({data: extTableData}); // 成功刷新表格
                    }
                },
                success: function (layero, dIndex) {
                    // 弹窗超出范围不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    $(layero).find('[lay-submit]').focus();
                }
            });
        });
        layui.form.render();
    });
</script>
